import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import store from "../store/index";
import permissionList from "@/utils/router-permission";

const CommonRoutes: Array<RouteRecordRaw> = [
	{
		path: "/login",
		name: "login",
		component: () => import("@/pages/login/login.vue"),
		meta: {
			name: "登录",
		},
	},
];

export const DynamicRoutes = [
	{
		path: "",
		name: "container",
		component: () => import("@/pages/container/container.vue"),
		meta: {
			name: "首页",
		},
		children: [
			{
				path: "home",
				name: "home",
				component: () => import("@/pages/home/home.vue"),
				meta: {
					name: "首页",
					icon: "house",
				},
			},
			{
				path: "base",
				name: "base",
				component: () => import("@/pages/demo202507/base.vue"),
				meta: {
					name: "202507学习",
					icon: "grid",
				},
				children: [
					 {
						path: "test1",
						name: "test1",
						component: () => import("@/pages/demo202507/test1.vue"),
						meta: {
							name: "测试vue3+ts表单校验数据格式",
							icon: "mostly-cloudy"
						},
					},
					{
						path: "test2",
						name: "test2",
						component: () => import("@/pages/demo202507/test2.vue"),
						meta: {
							name: "TS-基础类型",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "test3",
						name: "test3",
						component: () => import("@/pages/demo202507/test3.vue"),
						meta: {
							name: "TS-变量声明",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "test4",
						name: "test4",
						component: () => import("@/pages/demo202507/test4.vue"),
						meta: {
							name: "TS-接口",
							icon: "mostly-cloudy",
						},
					},
				],
			},
			// 0701 测试vue3+ts 表单校验数据格式
          {
				path: "workBase",
				name: "workBase",
				component: () => import("@/pages/workdemo/workBase.vue"),
				meta: {
					name: "浦发银行demo",
					icon: "grid",
				},
				children: [
					 {
						path: "w1",
						name: "w1",
						component: () => import("@/pages/workdemo/w1.vue"),
						meta: {
							name: "路由跳转-mitt事件总线传参",
							icon: "mostly-cloudy"
						},
					},
					// "w2/:id" 是为了params 传参，不然在目的路由接收不到参数
					{
						path: "w2/:id",
						name: "w2",
						component: () => import("@/pages/workdemo/w2.vue"),
						meta: {
							name: "路由跳转-params接收参数",
							icon: "mostly-cloudy"
						},
					},
					{
						path: "w3",
						name: "w3",
						component: () => import("@/pages/workdemo/w3.vue"),
						meta: {
							name: "路由跳转-query接收参数",
							icon: "mostly-cloudy"
						},
					},
					{
						path: "w4",
						name: "w4",
						component: () => import("@/pages/workdemo/w4.vue"),
						meta: {
							name: "路由跳转-sessionStorge接收参数",
							icon: "mostly-cloudy"
						},
					},
					{
						path: "w5",
						name: "w5",
						component: () => import("@/pages/workdemo/w5.vue"),
						meta: {
							name: "H5拖拽API实现div拖拽",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w6",
						name: "w6",
						component: () => import("@/pages/workdemo/w6.vue"),
						meta: {
							name: "H5拖拽+Vue-transition-group-1",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w7",
						name: "w7",
						component: () => import("@/pages/workdemo/w7.vue"),
						meta: {
							name: "div含组件-只有按钮可以拖拽",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w8",
						name: "w8",
						component: () => import("@/pages/workdemo/w8.vue"),
						meta: {
							name: "H5拖拽只有拖拽按钮可以拖拽",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w9",
						name: "w9",
						component: () => import("@/pages/workdemo/w9.vue"),
						meta: {
							name: "Eldescription省略显示",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w10",
						name: "w10",
						component: () => import("@/pages/workdemo/w10.vue"),
						meta: {
							name: "ElTable 中文分页测试",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w11",
						name: "w11",
						component: () => import("@/pages/workdemo/w11.vue"),
						meta: {
							name: "ElTable 多级表头测试1",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w12",
						name: "w12",
						component: () => import("@/pages/workdemo/w12.vue"),
						meta: {
							name: "ElTable 多级表头测试1",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w13",
						name: "w13",
						component: () => import("@/pages/workdemo/w13.vue"),
						meta: {
							name: "时间范围选择与校验",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w14",
						name: "w14",
						component: () => import("@/pages/workdemo/w14.vue"),
						meta: {
							name: "筛选组件",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w15",
						name: "w15",
						component: () => import("@/pages/workdemo/w15.vue"),
						meta: {
							name: "双重筛选条件",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w16",
						name: "w16",
						component: () => import("@/pages/workdemo/w16.vue"),
						meta: {
							name: "input下面渲染筛选tab",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w17",
						name: "w17",
						component: () => import("@/pages/workdemo/w17.vue"),
						meta: {
							name: "el-table 合并单元格后导出excel表格",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w18",
						name: "w18",
						component: () => import("@/pages/workdemo/w18.vue"),
						meta: {
							name: "el-table表格分组展开收起",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w19",
						name: "w19",
						component: () => import("@/pages/workdemo/w19.vue"),
						meta: {
							name: "el-table表格分组2",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w20",
						name: "w20",
						component: () => import("@/pages/workdemo/w20.vue"),
						meta: {
							name: "el-select添加loading",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w21",
						name: "w21",
						component: () => import("@/pages/workdemo/w21.vue"),
						meta: {
							name: "文件上传显示文件大小",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w22",
						name: "w22",
						component: () => import("@/pages/workdemo/w22.vue"),
						meta: {
							name: "select虚拟滚动",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w23",
						name: "w23",
						component: () => import("@/pages/workdemo/w23.vue"),
						meta: {
							name: "navui-时间便捷选择",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w24",
						name: "w24",
						component: () => import("@/pages/workdemo/w24.vue"),
						meta: {
							name: "navui-只显示时间选择面板",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w25",
						name: "w25",
						component: () => import("@/pages/workdemo/w25.vue"),
						meta: {
							name: "navui-便捷时间范围选择组件UI",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w26",
						name: "w26",
						component: () => import("@/pages/workdemo/w26.vue"),
						meta: {
							name: "navui-便捷时间选择",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w27",
						name: "w27",
						component: () => import("@/pages/workdemo/w27.vue"),
						meta: {
							name: "datePicker_popover1",
							icon: "mostly-cloudy",
						},
					},{
						path: "w28",
						name: "w28",
						component: () => import("@/pages/workdemo/w28.vue"),
						meta: {
							name: "datePicker_popover2_推荐",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w28-1",
						name: "w28-1",
						component: () => import("@/pages/workdemo/w28-1.vue"),
						meta: {
							name: "时间选择器复用测试",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w28-2",
						name: "w28-2",
						component: () => import("@/pages/workdemo/w28-2.vue"),
						meta: {
							name: "时间选择器-缩小",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w29",
						name: "w29",
						component: () => import("@/pages/workdemo/w29.vue"),
						meta: {
							name: "规则添加组件优化",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w30",
						name: "w30",
						component: () => import("@/pages/workdemo/w30.vue"),
						meta: {
							name: "antv-g2图表",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w31",
						name: "w31",
						component: () => import("@/pages/workdemo/w31.vue"),
						meta: {
							name: "mitt事件总线-发送参数",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w32",
						name: "w32",
						component: () => import("@/pages/workdemo/w32.vue"),
						meta: {
							name: "mitt事件总线-接收参数",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w33",
						name: "w33",
						component: () => import("@/pages/workdemo/w33.vue"),
						meta: {
							name: "cache总线-发送参数",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w34",
						name: "w34",
						component: () => import("@/pages/workdemo/w34.vue"),
						meta: {
							name: "cache总线-接收参数",
							icon: "mostly-cloudy",
						},
					},
					{
						path: "w35",
						name: "w35",
						component: () => import("@/pages/workdemo/w35.vue"),
						meta: {
							name: "级联选择测试",
							icon: "mostly-cloudy",
						},
					}
				],
			},
			{
				path: "base202511",
				name: "base202511",
				component: () => import("@/pages/demo202511/base202511.vue"),
				meta: {
					name: "浦发demo202511",
					icon: "grid",
				},
				children: [
					{
						path: "v1",
						name: "v1",
						component: () => import("@/pages/demo202511/v1.vue"),
						meta: {
							name: "弹窗形式用户引导",
							icon: "mostly-cloudy"
						},
					},
					{
						path: "v2",
						name: "v2",
						component: () => import("@/pages/demo202511/v2.vue"),
						meta: {
							name: "数据表格+操作导览intro",
							icon: "mostly-cloudy"
						},
					},
					{
						path: "v3",
						name: "v3",
						component: () => import("@/pages/demo202511/v3.vue"),
						meta: {
							name: "数据表格+操作导览driver",
							icon: "mostly-cloudy"
						},
					},
					{
						path: "v4",
						name: "v4",
						component: () => import("@/pages/demo202511/v4.vue"),
						meta: {
							name: "swiper轮播静图",
							icon: "mostly-cloudy"
						},
					},
					{
						path: "v4-1",
						name: "v4-1",
						component: () => import("@/pages/demo202511/v4-1.vue"),
						meta: {
							name: "swiper轮播动图",
							icon: "mostly-cloudy"
						},
					},
					{
						path: "v5",
						name: "v5",
						component: () => import("@/pages/demo202511/v5.vue"),
						meta: {
							name: "autocomplete自动补全搜索框",
							icon: "mostly-cloudy"
						},
					}
				]
			},
			{
				path: "theme",
				name: "theme",
				component: () => import("@/pages/theme/theme.vue"),
				meta: {
					name: "主题管理",
					icon: "mostly-cloudy",
				},
			},
			{
				path: "table",
				name: "table",
				component: () => import("@/pages/table/table.vue"),
				meta: {
					name: "表格管理",
					icon: "tickets",
					subHide: true,
				},
			},
			{
				path: "router",
				name: "router",
				component: () => import("@/pages/router/router.vue"),
				meta: {
					name: "路由管理",
					icon: "sort",
				},
			},
			{
				path: "international",
				name: "international",
				component: () => import("@/pages/international/international.vue"),
				meta: {
					name: "国际化",
					icon: "help",
				},
			},
			{
				path: "main/micro",
				name: "micro",
				component: () => import("@/pages/micro/micro.vue"),
				meta: {
					name: "微前端",
					icon: "grid",
				},
				children: [
					{
						path: "app-one",
						name: "micro-app-one",
						component: () => import("@/pages/micro/micro-app-one.vue"),
						meta: {
							name: "子应用1",
							icon: "TopLeft",
						},
					},
					{
						path: "app-two",
						name: "micro-app-two",
						component: () => import("@/pages/micro/micro-app-two.vue"),
						meta: {
							name: "子应用2",
							icon: "TopRight",
						},
					},
				],
			},
			{
				path: "map",
				name: "map",
				component: () => import("@/pages/map/map.vue"),
				meta: {
					name: "地图",
					icon: "map-location",
				},
			},
			{
				path: "editor",
				name: "editor",
				component: () => import("@/pages/editor/editor.vue"),
				meta: {
					name: "富文本编辑器",
					icon: "reading",
				},
			},
			{
				path: "iframe",
				name: "iframe",
				component: () => import("@/pages/iframe/iframe.vue"),
				meta: {
					name: "iframe通信",
					icon: "guide",
				},
			},
			{
				path: "screen",
				name: "screen",
				component: () => import("@/pages/screen/screen.vue"),
				meta: {
					name: "大屏展示",
					icon: "data-analysis",
				},
			},
			{
				path: "form",
				name: "form",
				component: () => import("@/pages/form/form.vue"),
				meta: {
					name: "表单",
					icon: "tickets",
				},
			}
		],
	},
];

const routes: Array<RouteRecordRaw> = [...DynamicRoutes, ...CommonRoutes];

const router = createRouter({
	history: createWebHistory(),
	routes,
});

router.beforeEach((to: any, _from: any, next: any) => {
	//未登录执行逻辑
	if (!getCookies("vtva-token") && to.path !== "/login") {
		return next({ path: "/login" });
	}
	//已登录执行逻辑
	if (getCookies("vtva-token") && to.path == "/login") {
		return next();
	}
	//重新加载动态路由
	if (!store.state.permissionList.length && to.path != "/login") {
		const routerArr: Array<object> =
			window.localStorage.getItem("permission") == "adminer"
				? permissionList
				: [];
		// router.removeRoute('router');
		return store.dispatch("FETCH_PERMISSION", routerArr).then(() => {
			next({ path: "/home" });
		});
	} else {
		next();
	}
});

function getCookies(v: string): string {
	const cookies = document.cookie;
	if (!cookies) return "";
	const list = cookies.split(";");
	for (let i = 0; i < list.length; i++) {
		const getValue = list[i].split("=");
		for (let j = 0; j < getValue.length; j++) {
			const key = getValue[0].replace(' ', '');
			const value = getValue[1];
			if (key == v) {
				return value;
			}
		}
	}
	return "";
}

// 这里简化路由对象 只取需要的字段
type CrumbObj = {
	name: string;
	meta: {
		name: string;
	};
};

router.afterEach((to: any, from: any, _next: any) => {
	try {
		//设置标题
		if (to.meta.name) {
			// document.title = to.meta.name + "_Vue3_TS_Vite";
			document.title = to.meta.name;
		}
	} catch (err) {}
	const arr = to.meta.hide ? [from, to] : to.matched;
	let routerList = [] as Array<CrumbObj>;
	arr.forEach((item: any) => {
		const obj: CrumbObj = {
			name: item.name,
			meta: {
				name: item.meta.name,
			},
		};
		routerList.push(obj);
	});
	if (to.meta.hide) {
		//顶部面包屑
		store.commit("SET_CRUMB_LIST", routerList);
		//目前左边导航选中的active
		// store.commit("SET_CURRENT_MENU", to.name);
	} else {
		routerList = routerList.splice(1);
		//顶部面包屑
		store.commit("SET_CRUMB_LIST", routerList);
		//目前左边导航选中的active
		store.commit("SET_CURRENT_MENU", to.name);
	}
});

export default router;
